یادداشت کن لذت ببر

از position با مقادیر absolute زمانی استفاده می کنیم که بخواهیم یک عنصر (به فرض بلاک div) نسبت به کل صفحه به صورت شناور کامل درآید، در این حالت عنصر به صورت پیش فرض به ابتدای سند HTML (گوشه بالای مرورگر) منتقل می شود و برای تنظیمات بیشتر می توان از خاصیت های left، right، top و bottom استفاده کرد، به مثال زیر توجه کنید.

.block{
    position:absolute;
    width:200px;
    height:100px;
    background:#9C0;
}

و مثالی که در آن از خاصیت های left و top استفاده شده:

.block{
    position:absolute;
    width:200px;
    height:100px;
    background:#9C0;
    top:200px;
    left:0px;
}
<div class="block">بلاک با خاصیت position absolute</div>

برای دیدن مثال با پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.

از position با مقادیر relative زمانی استفاده می کنیم که بخواهیم یک عنصر نسبت به تگ والد خود به حالت شناور درآید، به فرض اگر دکمه ای داریم که می خواهیم با کلیک بر روی آن، یک باکس در زیر دکمه ظاهر شود، در این حالت باید از مقادیر relative استفاده کنیم، به مثال زیر توجه کنید.

.parent{
    position:absolute;    
    top:400px;
    width:200px;
    height:100px;
}
.block{
    position:relative;
    width:200px;
    height:100px;
    background:#F90;
    border:1px solid #999;
    right:40px;
}
<div class="parent">
<div class="block">بلاک با خاصیت position relative</div>
</div>

توضیح: اگر در کلاس های بالا دقت کنید، برای تبعیت یک بلاک فرزند از بلاک والد خود، به بلاک فرزند خاصیت position با مقادیر relative اختصاص می دهیم، در این حالت هر کجا که بلاک والد قرار داشته باشد، بلاک فرزند نیز خاصیت های خود را از همان نقطه پردازش می کند، به فرض در حالت معمول خاصیت right از تگ body محاسبه می شود، اما برای بلاک های relative این خاصیت از تگ والد حساب می شود.

از position با مقادیر fixed زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت ثابت در یک قسمت از صفحه نمایش قرار گیرد و حتی با اسکرول نیز تغییری نکند، به عنوان مثال این شیوه ای است که برخی طراحان قالب از آن در کدنویسی های خود (معمولا بیشتر در قالب وبلاگ ها) برای ثابت کردن تصویر پس زمینه استفاده می کنند، به مثال زیر توجه کنید.

.block{
    position:fixed;
    width:200px;
    height:100px;
    background:#39F;
    border:1px solid #999;
    right:40px;
}
<div class="block">بلاک با خاصیت position fixed</div>

برای دیدن مثال با پیش نمایش آنلاین، به انتهای مطلب مراجعه کنید.

از position با مقادیر static زمانی استفاده می کنیم که بخواهیم یک عنصر به صورت پیش فرض و طبیعی در کنار سایر عناصر موجود در سند HTML پردازش شود، البته این مقدار چندان کاربردی نیست و کمتر استفاده می شود، چون بدون استفاده از آن نیز، عناصر به صورت static پردازش می شوند (مگر اینکه بخواهید خاصیتی که پیش تر به یک عنصر داده شده را دوباره نویسی و به حالت پیش فرض تغییر دهید که به این حالت در اصطلاح override می گویند).

در کنار خاصیت position که می توان با آن یک عنصر را در راستای محور X ها و Y ها (کل صفحه) شناور کرد، خاصیت دیگری به نام float وجود دارد که برای شناور کردن عنصر در راستای محور X ها (محور افقی) به کار می رود، به فرض اگر بخواهیم یک بلاک به سمت چپ یا راست متمایل باشد، از float با مقادیر left یا right استفاده می کنیم، به مثال زیر توجه کنید.
مثال:

.block{
    width:200px;
    height:100px;
    background:#39F;
    border:1px solid #999;
    float:left;
}
<div class="block">بلاک با خاصیت float left</div>

در زیر شرح مختصر مقادیری که float می پذیرد را بررسی می کنیم.
right : از float با مقادیر right زمانی استفاده می کنیم که بخواهیم عنصر (به فرض بلاک div) به سمت راست صفحه متمایل شود.
left : از float با مقادیر left زمانی استفاده می کنیم که بخواهیم عنصر به سمت چپ صفحه متمایل شود.
none : از float با مقادیر none زمانی استفاده می کنیم که بخواهیم مقادیر پیشین مربوط به float را برای یک عنصر دوباره نویسی و خنثی کنیم، در واقع این حالت پیش فرض float است.
نکته 1: در استایل نویسی کاربردی، معمولا مواردی پیش می آید که در کنار استفاده از float ناچاریم از clear با مقادیر both نیز برای همپوشانی بلاک های تو در تو استفاده کنیم.
نکته 2: برای چینش بلاک ها در کنار هم و در یک ردیف افقی، معمولا علاوه بر خاصیت float، از display با مقادیر inline-block نیز استفاده می شود (جهت سازگاری با برخی مرورگرها).

مثال و پیش نمایش آنلاین

برای آشنایی بیشتر با خاصیت position و float، در زیر مثال و پیش نمایش آنلاین این خاصیت ها را بررسی می کنیم.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>وبگو | استفاده از خاصیت position و float در CSS</title>
<!-- http://webgoo.ir -->
<style type="text/css">
body{
    font-family:Tahoma, Geneva, sans-serif;
    font-size:12px;
    direction:rtl;
    height:1500px;
}
.position-absolute{
    position:absolute;
    height:100px;
    width:200px;
    background:#9C3;
    bottom:50px;
    left:0px;
}
.position-parent{
    position:absolute;
    height:50px;
    width:50px;
    background:#CCC;
    top:400px;
    right:50px;    
}
.position-relative{
    position:relative;
    height:100px;
    width:200px;
    background:#FC0;
    margin-top:30px;
}
.position-fixed{
    position:fixed;
    height:100px;
    width:200px;
    background:#69F;
    top:50px;
    left:0px;
}
.float-parent{
    width:300px;
    height:130px;
    border:1px solid #CCC;
}
.float-right-1{
    width:100px;
    height:100px;
    background:#FC0;
    float:right;    
}
.float-right-2{
    width:100px;
    height:100px;
    background:#F90;
    float:right;        
}
.float-right-3{
    width:100px;
    height:100px;
    background:#F60;
    float:right;        
}
.float-clear{
    clear:both;
}
</style>
</head>

<body>
<!-- position absolute -->
<div class="position-absolute">بلاک با خاصیت position absolute</div>
<!-- position relative -->
<div class="position-parent">
بلاک والد
<div class="position-relative">بلاک با خاصیت position relative</div>
</div>
<!-- position fixed -->
<div class="position-fixed">بلاک با خاصیت position fixed</div>
<!-- float -->
<div class="float-parent">
<div class="float-right-1">float 1</div>
<div class="float-right-2">float 2</div>
<div class="float-right-3">float 3</div>
<div class="float-clear"></div>
چینش بلاک ها در کنار هم با خاصیت float
</div>
</body>
</html>

نظرات شما عزیزان:

نام :

آدرس ایمیل:

وب سایت/بلاگ :

متن پیام:

نظر خصوصی

 کد را وارد نمایید:

 

 

 

عکس شما

آپلود عکس دلخواه: